<template>
  <common-info-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="cancel"
    :infoLoading="infoLoading"
  >
    <common-info-table style="margin: 0 20px 20px; width: calc(100% - 40px)">
      <common-group-title title="请求参数"></common-group-title>
      <common-table
        class="assetsDetailed-table"
        :data="list"
        border
        height="100%"
      >
        <el-table-column
          prop="params"
          align="left"
          label="参数"
          show-overflow-tooltip
        />
        <el-table-column
          prop="value"
          align="left"
          label="样例值"
          show-overflow-tooltip
        />
        <el-table-column
          prop="describe"
          align="left"
          label="描述"
          show-overflow-tooltip
        />
      </common-table>
      <common-group-title title="响应信息"></common-group-title>
      <div class="json-view" v-if="json">
        <common-json-view :json="json"></common-json-view>
      </div>
    </common-info-table>
  </common-info-dialog>
</template>
<script>
import { queryApiDeail } from "@/api/apisecurity/apiinterface/interface";

export default {
  name: "detail",
  props: {
    id: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogTitle: "详情",
      dialogShow: false,
      infoLoading: false,
      list: [],
      json: null,
    };
  },
  methods: {
    cancel() {
      this.reset();
      this.dialogShow = false;
    },
    reset() {
      this.list = [];
    },
    showDetail(data) {
      this.dialogShow = true;
      this.infoLoading = true;
      queryApiDeail(data)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.data.detailsList;
            this.json = res.data.responseBody
              ? JSON.parse(res.data.responseBody)
              : null;
          } else {
            this.$GlobalErrorConfirm("数据加载失败", res.msg);
          }
        })
        .finally(() => (this.infoLoading = false));
    },
    changeVal(val) {
      return this.businessList.find((item) => item.dictValue === `${val}`)
        ?.dictLabel;
    },
  },
};
</script>

<style lang="scss" scoped>
.json-view {
  width: 100%;
}
</style>
